<template>
  <ElRow class="blog-header--wrap" type="flex" justify="space-around" align="middle">
    <ElCol :span="4">
      <div class="blog-head--logo">
        <!-- 这里使用用的是组件插槽, src不准确, 使用require进行操作 -->
        <a href="#">
          <!-- logo图片 -->
          <ElAvatar :size="60" class="blog-logo--pic" :src="logoImg" />
        </a>
      </div>
    </ElCol>

    <!-- TODO, push的前端路由, 让导航条跟随 -->
    <ElCol :span="10" hidden-xs-only class="blog-header--nav hidden-md-and-down">
      <ElMenu v-model:selectedKeys="current" mode="horizontal" :items="navList" router>
        <template v-for="navItem of navList" :key="navItem?.key">
          <ElMenuItem v-if="navItem?.key !== 'sub'" :index="navItem?.key" :route="{ path: navItem?.routeName }">{{
            navItem?.title
          }}</ElMenuItem>
          <ElSubMenu v-else index="navItem">
            <template #title>{{ navItem?.title }}</template>
            <ElMenuItem
              v-for="childItem of navItem?.children"
              :key="childItem?.key"
              :index="childItem?.key"
              :route="{ path: navItem?.routeName }"
              >{{ childItem?.title }}</ElMenuItem
            >
          </ElSubMenu>
        </template>
      </ElMenu>
    </ElCol>

    <!-- 设置search框, 当点击回车时或图标时触发search事件, 使用自定义事件形式, 触发原生事件 -->
    <ElCol :span="4" class="hidden-sm-and-down">
      <ElInput v-model="searchVal" class="blog-search" placeholder="请输入内容" @keydown.enter.exact="searchArticles">
        <template #suffix>
          <IEpSearch v-show="searchVal" style="width: 1em; height: 1em; margin-right: 8px" @click="searchArticles" />
        </template>
      </ElInput>
    </ElCol>
    <ElCol :span="4" :push="2">
      <component :is="choiceHead" />
    </ElCol>
  </ElRow>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import logoImg from '@/assets/img/logo.jpeg'
import LoginHead from '@/components/user/LoginHead.vue'
import UserInfoHead from '@/components/user/UserInfoHead.vue'
import { navList } from '@/config/headNav.config'
import { useUser } from '@/store/user'
import { $bus } from '@/unit/mitt'

let user = useUser()
let route = useRoute()
let router = useRouter()
let searchVal = ref<string>('')
let current = ref<string[]>(['index'])
let navLists = ref<any>({})
let choiceHead = computed<any>(() => {
  return user?.userInfo?.avatar && user?.token ? UserInfoHead : LoginHead
})
watch(
  () => route,
  (newValue) => {
    ref['headActive'].activeIndex = newValue.path
  },
)
onMounted(() => {
  // 在创建header时, 回去userInfo
  let token = user.token
  // 即使userInfo为空对象, 但对象为true
  let nickName = user?.userInfo?.nickName
  // 这里是为了判断, 如果每次head重新渲染, 在前端路由跳转, 但全局的userInfo存在, token存在, 会一直重新获取userInfo, 以及响应 欢迎对话框
  // 如果, token和nickName存在 就在navList中出现个人信息
  if (token && !nickName) {
    user.getUserInfo()
    return
  }
  // 如果用户信息不存在, 就不出用户信息这个词条
  if (!token && !nickName) {
    let userIdx = navList.value.findIndex((item) => item.key === 'userInfo')
    if (userIdx !== -1) {
      navList.value = navList.value.slice(0, userIdx)
    }
  }
  $bus.on('handleResetData', handleResetData)
})
function handleResetData() {
  navLists.value = navList
}
function searchArticles() {
  router.push({name: 'home', query: {q: searchVal.value}})
  // 使用bus总线, 与兄弟组件进行通信, 将q传递, 这里应该直接传递q的值
  // $bus.emit('search', searchVal.value)
  // 查询后清空value
  searchVal.value = ''
}
</script>

<style lang="less" scoped>
@import url('@/assets/css/variable.less');

.blog-header--wrap {
  display: flex;
  align-items: center;
  width: 100%;
  padding: @padding-space calc(100% - 96vw);
  background-color: @bg-theme-color;
}

.blog-head--logo {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}

.blog-header--nav:deep(.ant-col) {
  min-width: 736px;
}

.blog-header--nav :deep(.ant-menu) {
  background-color: @bg-theme-color;
}

.blog-header--nav :deep(.ant-menu .ant-menu-item),
.blog-header--nav :deep(.ant-menu .ant-menu-title-content) {
  margin: 0 @padding-space * 2;
  font-size: @font-size-h * 1.5;
}

.blog-header--nav :deep(.ant-menu .ant-menu-item.is-active) {
  border-bottom: 2px solid #ccc;
}

:deep(.ant-input-affix-wrapper-focused).blog-search {
  border-color: #ccc;
  box-shadow: 0 0 2px 2px #f1f1f1 inset;
}

:deep(.ant-input-affix-wrapper).blog-search {
  border-radius: 0 !important;

  &:hover {
    border-color: #ccc !important;
  }
}

.blog-search :deep(.ant-input) {
  min-width: 200px;
  border-radius: 0;
}

.blog-logo--pic.ant-avatar {
  width: 100% height 100%;
} /* header end */
</style>
